Introducing “The complete responsive lightweight framework” -Skeleton CSS.
If you begin on a smaller project or if you feel you don’t need all the utility of larger frameworks, you shall go for Skeleton. It’s a lightweight framework. In Cocoalabs, we used skeleton CSS preferably to develop our company website. It was a great experience working with Skeleton. Skeleton is super easy, lightweight as a feather with just 400 lines of code which is built for compatibility in both larger screens and mobile devices, The styles that comes along with the framework is designed to act as a base framework, and does not have too much components as like in other UI frameworks. Start with zero compiling or installing necessary.
The framework provides styles those for standard HTML elements and includes a grid, but that’s often more than enough to get started. If we need any additional components, we have to develop by customizing the css.
The Grid System
Skeleton framework gives a simple grid of 12-column fluid grid with a max width of 960px, which automatically fits to the both large, small and medium screens. The max width can be changed with one line of CSS and all columns will resize accordingly.
The syntax is simple and more convenient, It makes writing responsive styles much easier.
‘.container’ is main centered wrapper, ‘.columns’ should be the immediate child of ‘.row’. Just have to use, number and ‘column’ or ‘columns’ as class. Other than this, there are a few shorthand classes like one-third, two-thirds, one-half etc., to specify column width as well.
Typography
All sizes are set in rem. So, font-sizes and spatial relationships can be responsively sized based on a single font-size property.
Headings create a family of distinct sizes each with specific letter-spacing, line-height and margins.
Basically, headings are styled with Raleway- the google font at 15rem (15px) with 1.6 line height (24px).
Buttons
Unlike other frontend frameworks, Skeleton provides only two types of button styles.
Button-normal and Button-primary.
The standard <button> element is plain with no additional styles. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class. The button styles are simple and can be easily customized for the design.
Forms
Forms are a huge pain. But in this it is little bit easier. All inputs, select, and buttons are normalized for a common height .So inputs can be stacked or placed alongside each other.
Tables, code, Lists are also there with minimum style.
Media Queries
Skeleton media queries are mobile-first, which means they target min-width. Mobile-first queries are how Skeleton’s grid is built and is the preferable method of organizing CSS. It means all styles outside of a query apply to all devices. Larger devices are targeted for enhancement. This prevents small devices to parse large number of unused CSS.
Media queries provided by skeleton are listed below.
Larger than mobile : @media (min-width: 400px) {}
Larger than phablet : @media (min-width: 550px) {}
Larger than tablet : @media (min-width: 750px) {}
Larger than desktop : @media (min-width: 1000px) {}
Larger than Desktop HD : @media (min-width: 1200px) {}
As its name says, it has only the necessary features, The framework itself is a ‘skeleton ’of basic components and building blocks. This framework is easier to learn and implement, even for beginners. Skeleton provides all basic features with minimum CSS. So, as a beginner, it will be easier to learn than other rich UI frameworks. From an experienced developer’s point of view, it is the framework to explore.
The size comparison for various css frameworks are given below.
Skeleton has limited components & styles, but we can easily develop these components by JavaScript/ JQuery and CSS.
Skeleton doesn't gives the JS and CSS for tab/pills, carousel, accordion, pagination, breadcrumb, modal etc.. These were developed on our website with simple JS and CSS.
Pure CSS and JQuery breadcrumb
Let’s have a look in our modal, which is developed with CSS & JQuery.
